<template>
  <div class="uploader-start-panel">
    <el-upload
      ref="upload"
      class="uploader-start"
      drag
      :show-file-list="false"
      :before-upload="startUpload"
      :accept="videoAccept"
      @drop="handleDrop"
      :http-request="customUpload"
    >
      <div class="upload-handler">
        <img
          alt="上传视频"
          src="@/assets/icons/videoupload.svg"
          style="width: 35px; height: 30px"
        />
        <div class="info">拖拽到此处也可上传</div>
        <div class="upload-btn">上传视频</div>
      </div>
    </el-upload>
  </div>

  <div class="upload-explain">
    <el-popover placement="top-end" :width="400" trigger="hover">
      <template #reference>
        <div class="item">视频大小</div>
      </template>
      <div>
        <p>网页端上传的文件大小上限为50MB</p>
        <p>视频内容时长最大3小时</p>
        <p>过长或过大视频建议拆分后使用分p或合集功能进行投稿～</p>
      </div>
    </el-popover>

    <el-popover placement="top-end" :width="420" trigger="hover">
      <template #reference>
        <div class="item">视频格式</div>
      </template>
      <div>
        <p>推荐上传的格式为：mp4</p>
        <p>（推荐上传的格式在转码过程更有优势，审核过程更快哦！）</p>
        <p>其他允许上传的格式：mp4,avi,rmvb,mkv,mov</p>
      </div>
    </el-popover>

    <el-popover placement="top-end" :width="350" trigger="hover">
      <template #reference>
        <div class="item">视频码率</div>
      </template>
      <div>
        <p>分辨率最大支持 8192*4320</p>
        <p>推荐视频分辨率：1920*1080 或者 3840*2160</p>
      </div>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { preUpload } from '@/api/front/video/videoController'
// 定义允许的视频格式
const videoAccept = ref('video/mp4,video/x-m4v,video/webm,video/ogg,video/*')
const router = useRouter()
const params = reactive({
  fileName: '',
  chunkSize: 0,
})
const emit = defineEmits<{
  (
    event: 'start-upload',
    payload: { code: string; data: string; file: File; chunkSize: number },
  ): void
}>()

const uploadId = ref<string>('')
const CHUNK_SIZE = 3 * 1024 * 1024 // 每个分片大小为3MB
// 处理拖拽事件
const handleDrop = (event: DragEvent) => {
  event.preventDefault()
  if (event.dataTransfer && event.dataTransfer.files.length > 0) {
    const file = event.dataTransfer.files[0]
    // 检查文件类型是否为视频
    if (!file.type.startsWith('video/')) {
      ElMessage.error('请选择有效的视频文件')
      return
    }
    // 如果需要，可以在这里调用 startUpload 或直接开始上传
  }
}
// 上传前检查
const startUpload = async (rawFile: File) => {
  // 检查文件类型是否为视频
  if (!rawFile.type.startsWith('video/')) {
    ElMessage.error('请选择有效的视频文件')
    return
  }
  // 获取文件的大小和文件名
  const fileSize = rawFile.size
  params.fileName = rawFile.name
  //计算分片个数3MB为一片
  params.chunkSize = Math.ceil(fileSize / CHUNK_SIZE)
  //调用后端预上传接口获取上传id
  const result = await preUpload(params)
  if (result.data.code == '0') {
    uploadId.value = result.data.data as string
    // 在预上传成功后发射事件
    emit('start-upload', {
      code: result.data.code,
      data: result.data.data as string,
      file: rawFile,
      chunkSize: params.chunkSize,
    })
    return true
  } else {
    return
  }
}

// 自定义上传行为
const customUpload = (options: any) => {
  // 这里不执行实际的上传逻辑，而是只触发预上传
}
</script>

<style lang="scss" scoped>
.uploader-start-panel {
  margin: 20px 200px;
  .uploader-start {
    border: 2px dashed #ccc;
    :deep(.el-upload-dragger) {
      border: none;
    }
    .upload-handler {
      color: #999;
      padding: 50px 0;
      .icon-upload {
        font-size: 30px;
      }
      .info {
        margin: 20px 0;
      }
      .upload-btn {
        color: #fff;
        margin: 20px auto;
        width: 200px;
        height: 44px;
        cursor: pointer;
        background: #00a1d6;
        border-radius: 4px;
        transition: background-color 0.3s ease;
        text-align: center;
        line-height: 40px;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
.upload-explain {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  .item {
    color: #9499a0;
    padding: 0 20px;
    cursor: pointer;
  }
}
</style>
